<template>
  <z-divider orientation="left">Percentage columns</z-divider>
  <z-row type="flex">
    <z-col :flex="2">2 / 5</z-col>
    <z-col :flex="3">3 / 5</z-col>
  </z-row>
  <z-divider orientation="left">Fill rest</z-divider>
  <z-row type="flex">
    <z-col flex="100px">100px</z-col>
    <z-col flex="auto">auto</z-col>
  </z-row>
  <z-divider orientation="left">Raw flex style</z-divider>
  <z-row type="flex">
    <z-col flex="1 1 200px">1 1 200px</z-col>
    <z-col flex="0 1 300px">0 1 300px</z-col>
  </z-row>
</template>

<style lang="less" scoped>
.ant-row {
  color: #fff;
  .ant-col {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ant-col:first-child {
    background: #0080ff;
  }
  .ant-col:nth-child(2) {
    background: #00a0e9;
  }
}
</style>
